<template>
    <view class="bg-content">
        <div style="background-color: white; margin-bottom: 10px;">
            <u-cell-item :arrow="false" use-label-slot :title-style="{'width': '100%'}">
                <div slot="icon">
                </div>
                <div slot="title">
                    <div style="display: flex">
                        <div>
                            <image :src="objParams.tbOrderGoods.image ? objParams.tbOrderGoods.image + '?imageView2/1/w/100/h/100' : '/pages/sub/sub1-tabs/static/default-image/goods.jpg'"
                                   mode="aspectFill" style="width: 100px; height: 100px;"></image>
                        </div>
                        <div style="padding-left: 10px;">
                            <div style="font-size: 16px;">
                                {{ objParams.tbOrderGoods.title }}
                            </div>
                            <div style="font-size: 14px; color: grey;">
                                {{objParams.tbOrderGoods.specName}}
                                <label v-if="objParams.tbOrderGoods.colorId">;{{objParams.tbOrderGoods.colorName}}</label>
                            </div>
                            <div style="width: 100%; text-align: right; padding-right: 5px;">
                                <label>申请数量：</label>
                                <u-number-box size="18" v-model="quantity" :min="1"
                                              :max="objParams.tbOrderGoods.quantity - objParams.tbOrderGoods.alreadyGoodsAfterSaleApplyRefundQuantity"
                                              :long-press="false"></u-number-box>
                            </div>
                            <div style="width: 100%; text-align: right; padding-right: 5px;"
                                 v-if="objParams.tbOrder && objParams.tbOrder.payMode === '0' && selectedItem && selectedItem.type === '1'">
                                退款金额：<label style="color: red;">￥{{(objParams.tbOrderGoods.payMoney / objParams.tbOrderGoods.quantity * quantity) |
                                toFixed2}}</label>
                            </div>
                        </div>
                    </div>
                    <div style="text-align: right;">

                    </div>
                </div>
                <div slot="label">
                </div>
                <div slot="right-icon">
                </div>
                <!--默认value属性-->
                <div>
                </div>
            </u-cell-item>
        </div>

        <div style="background-color: white; margin-bottom: 20px;">
            <u-cell-group title="售后类型 (请选择一项)">
                <u-radio-group>
                    <u-cell-item :arrow="false" v-for="(item, index) in list" :key="index" :value="item.desc">
                        <div slot="title">
                            <u-radio @change="radioChange($event, item)" :name="item.name" :disabled="item.disabled">
                                {{item.name}}
                            </u-radio>
                        </div>
                    </u-cell-item>
                </u-radio-group>
            </u-cell-group>
            <div style="padding: 10px;">
                <u-input type="textarea" height="40" placeholder="请描述申请售后服务的具体原因" v-model="afterSaleReason"/>
            </div>
        </div>

        <u-button @click="submit">提交</u-button>
    </view>
</template>

<script>

    import {TbGoodsAfterSaleService} from "@/dev/services/tb-goods-after-sale.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {TbOrderGoodsAfterSaleService} from "@/dev/services/tb-order-goods-after-sale.service";

    export default {
        data() {
            return {
                list: [
                    {type: '0', name: '维修', desc: '', disabled: true},
                    {type: '1', name: '退货', desc: '', disabled: true},
                    {type: '2', name: '换货', desc: '', disabled: true},
                ],
                selectedItem: null,
                quantity: 1, // 申请数量
                afterSaleReason: '', // 售后原因
                goodsAfterSaleList: []
            }
        },
        onReady: function () {
            const _self = this;
            new TbGoodsAfterSaleService().findTbGoodsAfterSaleList({
                goodsId: _self.objParams.tbOrderGoods.goodsId
            }).then(result => {
                _self.goodsAfterSaleList = result;

                _self.list.forEach((item, index) => {
                    let goodsAfterSale = null;
                    _self.goodsAfterSaleList.forEach((innerItem, innerIndex) => {
                        if (item.type === innerItem.type) {
                            goodsAfterSale = innerItem;
                        }
                    });
                    if (!goodsAfterSale) {
                        item.desc = '商品未提供该项售后服务';
                        return;
                    }
                    let days = CommonUtil.getDiffDays(_self.objParams.tbOrderGoods.createTime, new Date());
                    if (days > parseInt(goodsAfterSale.days)) {
                        item.desc = '已经超过规定的服务时间';
                        return;
                    }

                    // 订单交易完成后不允许退货，确认收货阶段可以退货
                    if (_self.objParams.tbOrder.status === '4') {
                        item.desc = '已经超过规定的服务时间';
                        return;
                    }

                    // 可以申请该项售后服务
                    item.disabled = false;
                });
                console.log(_self.list);
            });
        },
        methods: {
            // 选中某个单选框时，由radio时触发
            radioChange($event, item) {
                console.log($event, item);
                this.selectedItem = item;
            },
            submit() {
                const _self = this;
                if (!this.selectedItem) {
                    CommonUtil.toast("请选择一种售后类型");
                    return;
                }
                this.afterSaleReason = CommonUtil.trim(this.afterSaleReason);
                if (!this.afterSaleReason) {
                    CommonUtil.toast("请描述申请售后服务的具体原因");
                    return;
                }
                CommonUtil.alert({
                    title: '提示！',
                    content: '确认提交申请售后吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            let data = {
                                communityId: _self.globalVariable.userInfo.tbCommunity.id,
                                orderId: _self.objParams.tbOrderGoods.orderId,
                                orderGoodsId: _self.objParams.tbOrderGoods.id,
                                storeId: _self.objParams.tbOrderGoods.storeId,
                                userId: _self.globalVariable.userInfo.id,
                                quantity: _self.quantity,
                                afterSaleStatus: '0',
                                afterSaleType: _self.selectedItem.type,
                                afterSaleReason: _self.afterSaleReason,
                            };
                            new TbOrderGoodsAfterSaleService().saveTbOrderGoodsAfterSale(data).then(result => {
                                _self.objParams.tbOrderGoods.disabled = true;
                                _self.objParams.tbOrderGoods.disabledText = '该商品售后处理中';
                                CommonUtil.toastNavigateBack('申请售后成功');
                                _self.$forceUpdate();
                            });
                        }
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
